/**
 * 一、增删改查
 * 增加元素前，必须先创建或复制元素。然后把创建或复制的元素，插入到DOM树中。
 */
let pageDom = document.getElementById("page");
let box1Dom = document.querySelector(".box1");
let box2Dom = document.querySelector(".box2");
let box3Dom = document.querySelector(".box3");
let box4Dom = document.querySelector(".box4");
let box5Dom = document.querySelector(".box5");
let box6Dom = document.querySelector(".box6");

/**
 * 创建元素
 */
let box7Dom = document.createElement("div");
let box7Child = document.createElement("p");
box7Child.textContent = "姓名：员工7";
box7Dom.className = "box7";

/**
 * 复制元素
 */
let box8Dom = box6Dom.cloneNode(true);
box8Dom.querySelector("p").textContent = "姓名：员工8";

/**
 * 插入元素
 */

// 父元素内插入子元素
box7Dom.appendChild(box7Child);
pageDom.appendChild(box7Dom);
pageDom.appendChild(box8Dom);

// 兄弟元素之间插入元素
pageDom.insertBefore(box6Dom, box1Dom);

// 替换掉父元素内的某个子元素  前面是要换成什么元素 后面是要替换的元素
pageDom.replaceChild(box5Dom, box2Dom);

/**
 * 删除元素
 */

// 删除父元素内的某个子元素
pageDom.removeChild(box4Dom);

// 删除自己
box3Dom.remove();

/**
 * 修改元素
 */

// 修改元素内容
box1Dom.textContent = "姓名：员工1【修改】";

// 修改元素html
box5Dom.innerHTML = "<p>姓名：员工5【修改】</p>";

// 修改元素属性
box1Dom.className = "box1 box1-modify";

/**
 * 查找元素
 */

console.log(document.getElementById("page"));
console.log(document.getElementsByClassName("box1"));
console.log(document.getElementsByTagName("div"));
console.log(document.querySelector(".box1"));
console.log(document.querySelectorAll("div"));

// 更实用的方法是document.querySelector()一般可以这样写：
let $ = document.querySelector.bind(document);
console.log($(".box1"));

/**
 * 二、获取属性和值
 * textContent返回一个元素的所有子节点的文本内容，包括隐藏的元素，而
 * innerText只返回可视元素的文本内容。
 */

// 获取.box1的html
console.log(document.querySelector(".box1").innerHTML);

// 获取.box1下的P标签的内瓤
console.log(document.querySelector(".box5 p").innerText);

// 获取#search的值
console.log(document.querySelector("#search").value);

// document下面的三个对象
console.log(document.body);
console.log(document.head);
console.log(document.documentElement);

/**
 * 三、操作属性
 */

// 获取属性
console.log(document.querySelector(".box1").getAttribute("class"));

// 设置属性
document.querySelector(".box1").setAttribute("id", "box1");

// 获取css属性  只能是行内的样式
console.log(document.querySelector(".box1").style.color);

// 获取css属性
console.log(
  window
    .getComputedStyle(document.querySelector(".box1"), null)
    .getPropertyValue("margin-bottom")
);

// 设置css属性
document.querySelector(".box1").style.color = "green";

document.querySelector("#search").style.cssText =
  "display:block;width:100%;height:30px;margin-bottom:15px;";

/**
 * 四、DOM 结点操作
 * 网页在外面的表现形式是标签的堆叠与嵌套，在计算机内部表现为一棵文档树：
 * 文档树由格式各样的结点构成：
 */

// 创建元素结点：
const newDiv = document.createElement("div");

// 创建文本结点：
const newText = document.createTextNode("text");

// 创建属性结点：
const _id = document.createAttribute("id");
_id.value = "newVal";

newDiv.appendChild(newText);
newDiv.setAttributeNode(_id);

// 创建临时文档片段：
const element = document.getElementById("ul"); // assuming ul exists
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];

browsers.forEach((browser) => {
  const li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);

// 向元素尾部添加节点
parentNode.appendChild(child);

// 向指定位置的前面添加节点
parentNode.insertBefore(newDom, refDom);

// 替换结点
parentNode.replaceChild(newChild, oldChild);

// 克隆结点 如果为true，会递归克隆它的所有子节点；否则只克隆他自己
element.cloneNode(deep);

// 删除结点
parentNode.removeChild(someChild);

/**
 * 五、dom节点类型的判断
 * dom节点的类型判断
 *可以使用nodeType属性来判断DOM节点的类型。nodeType属性返回一个整数值，表示节点的类型。
 * 1：元素节点（Element）
 * 2：属性节点（Attr）
 * 3：文本节点（Text）
 * 8：注释节点（Comment）
 * 9：文档节点（Document）
 */

/**
 * 六、计算元素尺寸
 * 1、clientHeight和clientWidth：
 *    获取元素的宽度和高度，包括元素的边框(border)、内边距(padding)和滚动条，但不包括外边距(margin)
 *    因此document的clientHeight和clientWidth属性就代表了网页的大小
 * 2、offsetHeight和offsetWidth：
 *    获取元素的宽度和高度，包括元素的边框(border)、内边距(padding)和滚动条，包括外边距(margin)
 * 3、offsetLeft和offsetTop：
 *    获取元素相对于其offsetParent的坐标
 * 4、 offsetParent：
 *    获取元素的offsetParent
 * 5、 scrollHeight和scrollWidth：
 *    提供了元素内容的整体宽度和高度，指包括滚动条在内的视觉面积（包括因溢出而未显示在屏幕上的部分）
 * 6、getBoundingClientRect()
 *    返回一个对象，包含top, right, bottom, left等属性
 *    width和height属性: 获取元素的宽度和高度，包括边框，但不包括外边距(margin)。
 *    top, right, bottom, left属性: 获取元素相对于视窗的位置，包括边框，但不包括外边距(margin)。
 * 7、getComputedStyle()
 *    获取元素的所有样式信息
 *    
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 */
